<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load static %}
    <link rel="stylesheet" href="{% static '/css/bootstrap.min.css' %}">
    <script src="{% static '/js/jquery-3.2.1.min.js' %}"></script>
    <script src="{% static '/js/bootstrap.min.js' %}"></script>
    <title>预定餐桌</title>
</head>
<style>
    div{
        width: 100%;
        text-align: center;
    }
</style>
<body>
<h3 align="center">显示餐桌信息</h3>
<div>
    <table class="table table-striped">
    <tr>
        <td>餐桌号</td>
        <td>可容纳人数</td>
        <td>费用</td>
        <td>选择</td>
    </tr>

{% for table in tables %}
    {% if table.state == 1 %}
        <tr>
            <td>{{ table.id }}</td>
            <td>{{ table.number }}</td>
            <td>{{ table.cost }}</td>
            <td>
                <span class="label label-info" style="font-size: 15px"><a href="/choicetable/{{ table.id }}/{{ client_id }}">选择</a></span>
            </td>
        </tr>
    {% endif %}
{% endfor %}

</table>
</div>
<div>
    <a href="/reception/"><span>返回前台</span></a>
</div>


</body>
</html>